<template>
  <div id="app">
    <router-view/>
    <theme-picker/>
    <el-dialog
      :visible.sync="visible"
      width="30%"
      :show-close="false"
      @click="handleColse"
    >

      <template #title>
        <div class="custom-header">
          <span>{{ ksLetter.title + '方案审核' }}</span>
          <el-tooltip effect="dark" content="存入客诉站内信,延后处理!" placement="bottom ">
            <i title="延后处理.." class="el-icon-s-promotion" @click="handleColse"></i>
          </el-tooltip>
        </div>
      </template>
      <div style="margin-left: 10px;color: #8c939d">工单号: {{ ksLetter.ksId }}</div>
      <div v-if="ksLetter.orderId" style="margin-left: 10px;color: #8c939d">订单编码:
        {{ ksLetter.orderId.substring(0, ksLetter.orderId.length - 11) }}<span
          style="color: #409EFF;">{{ ksLetter.orderId.slice(-11) }}</span></div>
      <div style="margin-left: 10px;color: #8c939d">提交人: {{ ksLetter.issuerUserName }}</div>
      <div style="margin-left: 10px;color: #8c939d">提交时间: {{ ksLetter.issuerTime }}</div>
      <div style="margin-left: 10px;color: #8c939d;">审核内容: {{ ksLetter.issuerContent }}</div>
      <div style="margin-left: 10px;color: #8c939d;">客诉内容: {{ ksLetter.ksContent }}</div>
      <el-divider></el-divider>

      <el-form ref="ksForm" :model="ksForm" label-width="80px">

        <el-form-item label="是否同一">
          <el-switch v-model="ksForm.isAgree" active-text="同意" active-color="#13ce66" inactive-text="不同意"
                     active-value="1" inactive-value="2">
          </el-switch>
        </el-form-item>

        <el-form-item label="审批意见">
          <el-input type="textarea" v-model="ksForm.replyContent" placeholder="请在此输入审批意见"></el-input>
        </el-form-item>
        <div class="hjfBottomFoot">
          <el-button size="small" type="primary" @click="onSubmit()">提交</el-button>
        </div>
      </el-form>
    </el-dialog>


    <el-dialog
      :visible.sync="orderVisible"
      width="30%"
      :show-close="false"
      @click="handleColse"
    >

      <template #title>
        <div class="custom-header">
          <span>{{ orderLetter.title }}</span>
          <el-tooltip effect="dark" content="存入客诉站内信,延后处理!" placement="bottom ">
            <i title="延后处理.." class="el-icon-s-promotion" @click="handleOrderColse"></i>
          </el-tooltip>
        </div>
      </template>

      <div v-if="orderLetter.orderId" style="margin-left: 10px;color: #8c939d">订单编码:
        {{ orderLetter.orderId.substring(0, orderLetter.orderId.length - 11) }}<span
          style="color: #409EFF;">{{ orderLetter.orderId.slice(-11) }}</span></div>
      <div style="margin-left: 10px;color: #8c939d">提交人: {{ orderLetter.issuerUserName }}</div>
      <div style="margin-left: 10px;color: #8c939d">提交时间: {{ orderLetter.issuerTime }}</div>
      <div style="margin-left: 10px;color: #8c939d;"> {{ orderLetter.goAudit == 1 ? '审核内容' : '通知内容' }} :
        {{ orderLetter.issuerContent }}
      </div>

      <el-divider></el-divider>
      <el-form ref="orderForm" :model="orderForm" label-width="80px">
        <el-form-item label="是否同意" v-if="orderLetter.goAudit == 1">
          <el-switch v-model="orderForm.isAgree" active-text="同意" active-color="#13ce66" inactive-text="不同意"
                     active-value="1" inactive-value="2">
          </el-switch>
        </el-form-item>

        <el-form-item :label="orderLetter.goAudit == 1 ? '审批意见' :'回复通知'">
          <el-input type="textarea" v-model="orderForm.replyContent" placeholder="请在此输入..."></el-input>
        </el-form-item>
        <div class="hjfBottomFoot">
          <el-button size="small" type="primary" @click="onOrderSubmit()">提交</el-button>
        </div>
      </el-form>
    </el-dialog>


    <el-dialog :visible.sync="replyVisible" width="30%" @close="updateOrderLetterReplyStatus">
      <template #title>
        <div class="custom-header">
          <span>{{ replyOrderLetter.title }}</span>
        </div>
      </template>
      <div v-if="replyOrderLetter.orderId" style="margin-left: 10px;color: #8c939d">订单编码:
        {{ replyOrderLetter.orderId.substring(0, replyOrderLetter.orderId.length - 11) }}<span
          style="color: #409EFF;">{{ replyOrderLetter.orderId.slice(-11) }}</span></div>
      <div style="margin-left: 10px;color: #8c939d">提交人: {{ replyOrderLetter.issuerName }}</div>
      <div style="margin-left: 10px;color: #8c939d">提交时间: {{ replyOrderLetter.issuerTime }}</div>
      <div style="margin-left: 10px;color: #8c939d;"> {{ replyOrderLetter.goAudit == 1 ? '审核内容' : '通知内容' }} :
        {{ replyOrderLetter.issuerContent }}
      </div>
      <el-divider></el-divider>
      <div style="margin-left: 10px;color: #8c939d">回复人: {{ replyOrderLetter.auditName }}</div>
      <div style="margin-left: 10px;color: #8c939d">回复时间: {{ replyOrderLetter.replyTime }}</div>
      <div style="margin-left: 10px;color: #8c939d;"> 回复内容 : {{ replyOrderLetter.replyContent }}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import {delayHandler, delayOrderHandler, getKsMessageNumber, updateKsLetter} from "@/api/hmk/ksLetter";
import {getOrderMessageNumber, updateOrderLetter, updateOrderLetterReplyStatus} from "@/api/hmk/orderLetter";

export default {
  name: "App",
  components: {ThemePicker},

  data() {
    return {
      worker: null,
      worker2: null,
      worker3: null,
      visible: false,
      replyVisible: false,
      replyOrderLetter: {
        id: null,
        title: null,
        issuerContent: null,
        issuerName: null,
        issuerTime: null,
        orderId: null,
        goAudit: null,
        auditName: null,
        replyContent: null,
        replyTime: null,
      },

      ksLetter: {
        id: null,
        title: null,
        issuerContent: null,
        issuerUserName: null,
        ksId: null,
        issuerTime: null,
        orderId: null,
        ksContent: null,
        content: null,
      },

      orderVisible: false,
      orderLetter: {
        id: null,
        title: null,
        issuerContent: null,
        issuerUserName: null,
        issuerTime: null,
        orderId: null,
        goAudit: null,
        order_follow_id: null,
      },
      orderForm: {
        id: null,
        isAgree: 0,
        replyContent: null,
      },
      ksForm: {
        id: null,
        isAgree: 1,
        replyContent: null,
      }
    }
  },

  methods: {
    updateOrderLetterReplyStatus() {
      updateOrderLetterReplyStatus({'id': this.replyOrderLetter.id}).then(res => {
        this.$modal.msgSuccess('状态已更新!');
        this.replyVisible = false;
      })
    },
    initObject() {
      this.ksForm.id = null;
      this.ksForm.isAgree = 1;
      this.ksForm.replyContentd = null;
      this.orderForm.id = null;
      this.orderForm.isAgree = 1;
      this.orderForm.replyContentd = null;
    },
    destroyWorkers() {
      if (this.worker) {
        this.worker.terminate();
        this.worker = null;
      }
      if (this.worker2) {
        this.worker2.terminate();
        this.worker2 = null;
      }
      if (this.worker3) {
        this.worker3.terminate();
        this.worker3 = null;
      }
    },
    onSubmit() {
      if (!this.ksForm.replyContent) {
        this.$modal.msgWarning("审批意见必填!")
        return;
      }
      this.ksForm.id = this.ksLetter.id;
      updateKsLetter(this.ksForm).then(res => {
        this.$modal.msgSuccess('已提交!');
      })
      this.visible = false;
    },

    onOrderSubmit() {
      if (!this.orderForm.replyContent) {
        this.$modal.msgWarning("回复消息必填!")
        return;
      }
      this.orderForm.id = this.orderLetter.id;
      updateOrderLetter(this.orderForm).then(res => {
        this.$modal.msgSuccess('已提交!');
      })
      this.orderVisible = false;
    },
    async handleColse() {
      await delayHandler({'id': this.ksLetter.id}).then(res => {
        this.$modal.msgSuccess('状态已更新,记得去客诉站内信处理!');
      })
      this.visible = false;
      await getKsMessageNumber({isAgree: 3}).then(res => {
        if (res && res.data && res.data.ksMessageNumber) {
          this.$store.commit('SET_ksMessageNumber', res.data.ksMessageNumber);
        } else if (!res.data)
          this.$store.commit('SET_ksMessageNumber', null);
      })

    },
    async handleOrderColse() {
      try {
        await delayOrderHandler({'id': this.orderLetter.id}).then(res => {
          this.$modal.msgSuccess('状态已更新,记得去订单站内信处理!');
        })
        this.orderVisible = false;
        await getOrderMessageNumber({isAgree: 3}).then(res => {
          if (res && res.data && res.data.orderMessageNumber) {
            this.$store.commit('SET_OrderMessageNumber', res.data.orderMessageNumber);
          } else if (!res.data)
            this.$store.commit('SET_OrderMessageNumber', null);
        })
      } catch (error) {
        console.log('捕获到异常了', error)
      }
    },
    initWorker() {
      this.worker = new Worker('/worker/messageWorker.js')
      this.initObject();
      const jsonBody = {
        auditUser: this.$store.state.user.id,
        isAgree: 0
      }
      this.worker.postMessage({
        delay: 30000,
        command: 'start',
        token: 'Bearer ' + this.$store.state.user.token,
        url: `${process.env.VUE_APP_BASE_API}/hmk/ksLetter/getByAuditUser`,
        body: JSON.stringify(jsonBody)
      });
      this.worker.onmessage = (e) => {
        if (null != e.data.data.data && e.data.data.data.auditUser == this.$store.state.user.id) {
          this.ksLetter = {...e.data.data.data};
          this.ksForm.replyContent = null;
          this.visible = true;
        }
      };

      this.worker2 = new Worker('/worker/messageWorker.js')
      this.worker2.postMessage({
        delay: 20000,
        command: 'start',
        token: 'Bearer ' + this.$store.state.user.token,
        url: `${process.env.VUE_APP_BASE_API}/hmk/ksLetter/getOrderByAuditUser`,
        body: JSON.stringify(jsonBody)
      });
      this.worker2.onmessage = (e) => {
        if (null != e.data.data.data && e.data.data.data.auditUser == this.$store.state.user.id) {
          this.orderLetter = {...e.data.data.data};
          this.orderForm.replyContent = null;
          this.orderVisible = true;
        }
      };

      this.worker3 = new Worker('/worker/messageWorker.js')
      this.worker3.postMessage({
        delay: 15000,
        command: 'start',
        token: 'Bearer ' + this.$store.state.user.token,
        url: `${process.env.VUE_APP_BASE_API}/hmk/orderLetter/getReplyMessageByAlready`,
        body: JSON.stringify({})
      });

      this.worker3.onmessage = (e) => {
        if (null != e.data.data.data && e.data.data.data.issuerUser == this.$store.state.user.id) {
          this.replyOrderLetter = {...e.data.data.data};
          this.replyVisible = true;
        }
      };
    }
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  watch: {
    '$store.state.user.id': {
      immediate: true,
      handler(newId) {
        if (newId) {
          console.log('process.env.VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
          this.initWorker();
        }
      }
    }
  },
  beforeDestroy() {
    this.destroyWorkers();
  },
  deactivated() {
    this.destroyWorkers();
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}

.hjfBottomFoot {
  display: flex;
  justify-content: end;
}

.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-header i {
  cursor: pointer;
  font-size: 18px;
  color: #409EFF;
}
</style>
